<template>
  <div class="add_box">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>鞋品添加</span>
      </div>
      <div>
        <el-form ref="form" :model="shoesAddForm" :rules="shoesAddFormRules" label-width="80px">
          <el-form-item label="鞋品名称" prop="shoesName">
            <el-input v-model="shoesAddForm.shoesName"></el-input>
          </el-form-item>
          <el-form-item label="鞋品价格" prop="shoesPrice">
            <el-input v-model="shoesAddForm.shoesPrice"></el-input>
          </el-form-item>
          <el-form-item label="鞋品数量" prop="shoesNumber">
            <el-input v-model="shoesAddForm.shoesNumber"></el-input>
          </el-form-item>
          <el-form-item label="鞋品类型" prop="shoesType">
            <el-select v-model="shoesAddForm.shoesType" placeholder="请选择">
              <el-option
                v-for="item in shoesTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="鞋品图片" prop="shoesImage">
            <el-upload
              action="http://127.0.0.1:8081/imageUpload"
              list-type="picture-card"
              :show-file-list="true"
              :data="getfileData()"
              :file-list="imagelist"
              :before-upload="beforeUpload"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handlSuccess"
              :class="{upload:uploadDisabled}"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <el-form-item class="btns">
            <!-- <el-button @click="Login" class="btnNot">取 消</el-button> -->
            <el-button type="warning" @click="shoesAdd()">点击添加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadDisabled: false,
      imagelist: [],
      imageForm: {
        imageType: ""
      },
      shoesAddForm: {
        shoesName: "",
        shoesPrice: "",
        shoesNumber: null,
        shoesType: "",
        shoesImage: "",
        shoesMonthNumber: 0,
        shoesDiscsss: "0"
      },
      shoesAddFormRules: {
        shoesName: [
          { required: true, message: "请输入鞋品名", trigger: "blur" }
        ],
        shoesPrice: [{ required: true, message: "请输入价格", trigger: "blur" }],
        shoesNumber: [
          { required: true, message: "请输入数量", trigger: "blur" }
        ],
        shoesType: [{ required: true, message: "请输入类别", trigger: "blur" }],
        shoesImage: [{ required: true, message: "请上传图片", trigger: "blur" }]
      },
      shoesTypeOptions: [
        {
          value: "tuoxie",
          label: "拖鞋"
        },
        {
          value: "paobuxie",
          label: "跑步鞋"
        },
        {
          value: "lanqiuxie",
          label: "篮球鞋"
        },
        {
          value: "zuqiuxie",
          label: "足球鞋"
        },
        {
          value: "wangqiuxie",
          label: "网球鞋"
        },
        {
          value: "xiuxianxie",
          label: "休闲鞋"
        },
        {
          value: "banxie",
          label: "板鞋"
        },
        {
          value: "fanbuxie",
          label: "帆布鞋"
        }
      ],
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    beforeUpload(file) {
      if (this.shoesAddForm.shoesType == "") {
        alert("请先选择图片类型");
        return false;
      }
    },
    getfileData() {
      this.imageForm.imageType = this.shoesAddForm.shoesType;
      return this.imageForm;
    },
    handlSuccess(response, file, fileList) {
      this.uploadDisabled = fileList.length >= 1;
      this.shoesAddForm.shoesImage = response.data;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.imagelist = [];
      this.shoesAddForm.shoesImage = "";
      this.uploadDisabled = fileList.length >= 1;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    shoesAdd() {
      let that = this; 
			let userId = JSON.parse(localStorage.getItem("user")).userId;
      that.$axios
        .post("/shoes/shoesRegist", {
          shoesName: that.shoesAddForm.shoesName,
          shoesPrice: that.shoesAddForm.shoesPrice,
          shoesNumber: that.shoesAddForm.shoesNumber,
          shoesType: that.shoesAddForm.shoesType,
          shoesImage: that.shoesAddForm.shoesImage,
          shoesMonthNumber: that.shoesAddForm.shoesMonthNumber,
          shoesDiscsss: that.shoesAddForm.shoesDiscsss,
          userId:userId
        })
        .then(function(response) {
          console.log(response);
          alert("添加成功！");
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    image(e) {
      console.log(e);
    }
  },
  computed: {}
};
</script>

<style scoped>
.add_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_box .el-card {
  border: 0px;
}
.box-card {
  width: 480px;
}
.otherLogin {
  display: flex;
  flex-direction: row;
}
.other {
  margin-right: 10px;
  color: #999;
}
.btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
.clearfix {
  clear: both;
  font-size: 18px;
  font-weight: bold;
}
.upload >>> .el-upload--picture-card {
  display: none;
}
</style>